import React,{Component} from 'react';
import {View,Text,ImageBackground,Button,StyleSheet,Image} from 'react-native';
import THNav from '../../../components/THNav';
import request from '../../../utils/request';
import Swiper from 'react-native-deck-swiper';
import THButton from '../../../components/THButton'
import {BASE_URI,FRIENDS_QUESTIONS} from '../../../utils/pathMap'
import { pxToDp } from '../../../utils/stylesKits';
    class Index extends Component{
        state = {
            questions:[],
            currentIndex:0
        }
        componentDidMount(){
            this.getList()
        }
        // 获取页面数据获取问卷列表数据
        getList = async ()=>{
            const res = await request.privateGet(FRIENDS_QUESTIONS)
            console.log('测试题'+JSON.stringify(res))
            this.setState({ questions:res.data  });
        }
        // 跳转填写当前测试题等级的相关数据
        goAskPage = ()=>{
            const {questions,currentIndex} = this.state;
            // 传参 取参数的时候 this.props.route...
            this.props.navigation.navigate("TestQA",questions[currentIndex]);
        }

        render(){
            const {questions,currentIndex} = this.state
            return(
                <View style={{flex:1,backgroundColor:"#fff"}}>
                    <THNav title="测灵魂" />
                    <ImageBackground
                    source={require("../../../res/testsoul_bg.png")}
                    style={{width:"100%",height:"60%"}}
                    imageStyle={{height:"100%"}}
                    >
                    {questions.length?
                    <Swiper
                        cards={questions}
                        renderCard={(card)=>{
                            return (
                                <View style={styles.card}>
                                    <Image style={{width:"100%",height:"100%"}} source={{uri:BASE_URI+card.imgpath}} />
                                </View>
                            )
                        }}
                        onSwiped={()=>this.setState({ currentIndex: currentIndex+1 })}
                        onSwipedAll={()=>{console.log('onSwipedAll')}}
                        cardIndex={currentIndex}
                        cardVerticalMargin={0}
                        backgroundColor={'transparent'}
                        stackSize={1}>

                    </Swiper>:<></>}
                    </ImageBackground>
                    <THButton 
                    onPress={this.goAskPage}
                    style={{position:"absolute",width:"80%",height:pxToDp(40),bottom:pxToDp(40),alignSelf:"center"}}>开始测试</THButton>
                </View>
            );
        }
    }

    const styles = StyleSheet.create({
        card:{
            height:"80%",
            borderRadius:4,
            borderColor:'#E8E8E8',
            justifyContent:'center',
            backgroundColor:'white'
        },
    })
export default Index;
